// 这个js文件用于给价格添加点击事件

// 拿到价格
const price = document.getElementById('sort_price')


// 记录点击的左值和右值
const leftVForPage = ''
const rightVForPage = ''

// 单击价格，改变背景图片
clickChangeBackground()


// 点击按钮完成排序功能（使用事件委托）
$('#category_sort').on('click','a',function(e) {
	// 设置css属性，先清空掉所有a的css属性
	$('#category_sort > li > a').removeAttr('style').attr('active','0')
	
	// 再设置单独被点击的样式
	$(this).css({'color':'red','backgroundColor':'rgb(220,220,220)'}).attr('active','1')
	
	// 当发送点击时，发送ajax请求，对数据排序，然后把得到的数据进行渲染
	const sortStyle = $(this).attr('href')
	
	sendAjaxTakeArg(sortStyle)
	
	// 如果是价格就要变换一下
	if(sortStyle==='price'){
		$(this).attr('href','rprice')
	}else if(sortStyle==='rprice'){
		$(this).attr('href','price')
	}else{ // 如果不是价格，从新设置价格的背景图片
		$('#category_sort > li > a:last > i').css('backgroundImage','url("images/book/normal.png")')
	}
	
	return false;
})

// 点击清除按钮，清除价格，并重新发送ajax请求
function clearPrice(){
	$('#input_price > input').val('')
	
	// 当发送点击时，发送ajax请求，对数据排序，然后把得到的数据进行渲染
	const sortStyle = $('#category_sort > li > a[active=1]').attr('href')

	// 清除过滤信息
	leftVForPage = ''
	rightVForPage = ''
	sendAjaxTakeArg(sortStyle)
}

// 点击提交价格按钮，对原有数据进行筛选
function submitPrice(){
	// 先取值，拿到左值右值
	let leftV = parseFloat($('#input_price > input:first').val())
	let rightV = parseFloat($('#input_price > input:last').val())
	
	console.log(leftV+'=>'+rightV)
	
	// 先判断是不是NaN，如果是就置空，交由后端处理
	if(isNaN(leftV)){
		leftV = ''
	}
	if(isNaN(rightV)){
		rightV = ''
	}
	
	// 当发送点击时，发送ajax请求，对数据排序，然后把得到的数据进行渲染
	const sortStyle = $('#category_sort > li > a[active=1]').attr('href')
	
	// 转成数字判断大小，如果左边比右边大，则交换位置 （在左右都不为空的情况下）
	if((leftV != '' && rightV != '') && leftV > rightV){
		// 交换数字的位置
		$('#input_price > input:first').val(rightV)
		$('#input_price > input:last').val(leftV)
		
		// 记录当前过滤的信息
		leftVForPage = rightV
		rightVForPage = leftV
		
		sendAjaxTakeArg(sortStyle,rightV,leftV)
	}else{
		// 记录当前过滤的信息
		leftVForPage = leftV
		rightVForPage = rightV
		
		sendAjaxTakeArg(sortStyle,leftV,rightV)
	}
}



// 给左翻页按钮绑定事件中要执行的函数
function leftPageButtonBind() {
	$('#category_sort > li > button:first').off('click').on('click',function(){
		// 如果左键没有绑定则绑定，并设置样式
		$('#category_sort > li > button:last').css({'cursor':'pointer','background-color':'black'})
		rightPageButtonBind()
		
		// 得到当前是第几页，（一开始是到第二页，才可以唤醒）
		const nowPage =  parseInt($('#category_sort > li > span:first').text())
		
		// 当前页数减一
		$('#category_sort > li > span:first').text(nowPage-1)
		
		// 先得到排序风格
		const sortStyle = $('#category_sort > li > a[active=1]').attr('href')
		
		// 最后跳过元素查询数据（0代表第一页）
		sendAjaxTakeArg(sortStyle,leftVForPage,rightVForPage,nowPage-2)
		
		// 执行完后判断是否需要关闭左键,条件（总数除10小于当前页数）
		if((nowPage - 2) < 1){
			// 解绑并添加样式
			$(this).off('click').css({'cursor':'default','background-color':'grey'})
		}
	})
}

//给右翻页按钮绑定事件中要执行的函数
function rightPageButtonBind(){
	$('#category_sort > li > button:last').off('click').on('click',function(){
		// 如果左键没有绑定则绑定，并设置样式
		$('#category_sort > li > button:first').css({'cursor':'pointer','background-color':'black'})
		leftPageButtonBind()
		
		// 得到当前是第几页，（一开始是第一页）
		const nowPage = parseInt($('#category_sort > li > span:first').text())
		
		// 当前页数加一
		$('#category_sort > li > span:first').text(nowPage+1)
		
		// 先得到排序风格
		const sortStyle = $('#category_sort > li > a[active=1]').attr('href')
		
		// 最后跳过元素查询数据（0代表第一页）
		sendAjaxTakeArg(sortStyle,leftVForPage,rightVForPage,nowPage-1)
		
		// 执行完后判断是否需要关闭右键,条件（总数除10小于当前页数）
		if($('#category > span > em').text() / 10 <= (nowPage + 1)){
			// 解绑并添加样式
			$(this).off('click').css({'cursor':'default','background-color':'grey'})
		}
	})
}



// 计算得到左右键是否可以点击
$(function(){
	// 首先得到总数
	const booksNum = $('#category > span > em').text() 
	
	// 首先左键是不可以点击的
	$('#category_sort > li > button:first').css({'cursor':'default','background-color':'grey'});
	
	// 计算判断右键是否需要被禁用
	if(parseFloat(booksNum) / 10 > 1){
		rightPageButtonBind()
	}else{
		$('#category_sort > li > button:last').css({'cursor':'default','background-color':'grey'});
	}
	
})

// 单击价格，改变背景图片
function clickChangeBackground(){
    // 记录自己当前的样子
    let flag = true

    price.addEventListener(('click'),()=>{

       
        if(flag){    // 暂时只改变背景颜色

            price.children[0].style.backgroundImage = "url('images/book/top.png')"
            price.setAttribute('title','点击后按价格由高到低')
        }else{
            price.children[0].style.backgroundImage = "url('images/book/bottom.png')"
            price.setAttribute('title','点击后按价格由低到高')
        }

        flag = !flag
        
        
        return false;
    })
}

